<!--2019/5/22 23:37. by soft-->
<#assign title="通知公告" notices='this'>
<#include 'header.ftl'>

<div class="layui-card">
  <div class="layui-card-header">
    <div class="card-title">
      通知公告列表
    </div>
    <div class="header-tools">
      <button onclick="methods.add()" class="layui-btn-sm layui-btn layui-btn-normal layui-inline">
        <i class="layui-icon layui-icon-add-circle"></i>添加
      </button>
    </div>
  </div>
  <div class="layui-card-body">
    <table id="notices" lay-filter="notices"></table>
  </div>
</div>

<script type="text/html" id="noticeBox">
  <div class="layer-dialog-from">
    <form class="layui-form ">
      <div class="layui-form-item">
        <label class="layui-form-label">标题</label>
        <div class="layui-input-block">
          <input class="layui-input" name="title"
                 lay-verify="required" lay-verType="tips" placeholder="公告标题"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">开始</label>
        <div class="layui-input-block">
          <input class="layui-input" id="startTime" name="startTime"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">结束</label>
        <div class="layui-input-block">
          <input class="layui-input" id="endTime" name="endTime"/>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">结束</label>
        <div class="layui-input-block">
          <select name="type">
            <option value="NOWARER">停水</option>
            <option value="NOPOWER">断电</option>
            <option value="NONET">断网</option>
            <option value="WORK">施工</option>
            <option value="OTHER">其他</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">内容</label>
        <div class="layui-input-block">
          <textarea class="layui-textarea" name="content" maxlength="150"
                    lay-verify="required" lay-verType="tips" placeholder="公告内容<150"></textarea>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn layui-btn-fluid layui-btn-normal" lay-submit lay-filter="add">添加</button>
        </div>
      </div>
    </form>
  </div>
</script>

<script>
  var methods, layerIndex;
  layui.use(['laytpl', 'table', 'layer', 'form', 'jquery', 'laydate'], function () {
    var table = layui.table;
    var layer = layui.layer;
    var form = layui.form;
    var $ = layui.$;
    var laydate = layui.laydate;
    var laytpl = layui.laytpl;

    var $noticeBox = $('#noticeBox');

    table.render({
      elem: '#notices',
      method: 'post',
      url: '/admin/notice/page',
      page: true,
      cols: [[
        {title: '序号', type: 'numbers'},
        {title: '标题', field: 'title'},
        {title: '内容', field: 'content'},
        {title: '公告类型', field: 'type'},
        {title: '展现时间', field: 'startTime'},
        {title: '结束时间', field: 'endTime'},
        {
          title: '操作', templet: function (s) {
            return '<button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>'
          }, width: 75
        }
      ]],
      parseData: parseData
    }); // table

    methods = {
      del: function (nt) {
        layer.alert('确定删除该公告？', {title: '确定提示', icon: 3}, function (index) {
          $.post('/admin/notice/del/' + nt.id, function (data) {
            layer.msg('删除成功!', {icon: 6, time: 1200})
            table.reload('notices')
          })

          layer.close(index)
        })
      },
      add: function () {
        laytpl($noticeBox.html()).render({}, function (html) {
          methods.dialog(html);
        })
      },
      dialog: function (html, title) {
        layerIndex = layer.open({
          type: 1,
          area: ['450px'],
          title: title ? title : '发布公告',
          content: html
        });
        form.render('select');
        var now = dayjs().format('YYYY-MM-DD HH:mm:ss');
        laydate.render({
          elem: '#startTime',
          value: now,
          min: now,
          type: 'datetime'
        });
        laydate.render({
          elem: '#endTime',
          value: now,
          min: now,
          theme: '#914d0b',
          type: 'datetime'
        });
      }
    }

    // 事件
    table.on("tool(notices)", function (e) {
      methods[e.event](e.data, e.tr);
    });

    form.on('submit(add)', function (fo) {
      $.post('/admin/notice/add', fo.field, function (data) {
        layer.msg('添加成功！', {icon: 6, time: 1200});
        layer.close(layerIndex);
        table.reload('notices')
      });
      return false;
    })
  })
</script>
<#include 'footer.ftl'>